<template>
	<view style="background-color:#EEECED;">
		<view class="container">
			<image src="../../static/home1.jpg" style="height: 180px;"></image>
			<image src="../../static/apponmenttitie.jpeg" class="image"></image>
			<navigator url="/subpkg/appointment/appointment" hover-class="navigator-hover" class="navigator">
				<text class="text">去预约>></text>
			</navigator>
		</view>

		<view style="height: 30px;background-color:#f4f3f3;"></view>
		<view style="height: 10px;background-color:#f1f0f0;"></view>
		<image src="../../static/home2.jpeg" style="height: 130px;"></image>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			};
		},
		onLoad() {

		},
		methods: {
			fabClick() {
				wx.redirectTo({
					url: '/subpkg/service/service'
				});
			}
		},
	};
</script>

<style lang="scss">
	.container {
		display: flex;
		flex-direction: column;
		justify-content: flex-end; // 这将使得子元素（navigator）在容器底部对齐，但我们需要进一步调整
		align-items: center; // 水平居中
		position: relative; // 为了让navigator能够相对于container定位
		height: 100%; // 确保容器有足够的高度
		width: 100%; // 确保容器有足够的宽度
	}

	.image {
		width: 100%; // 图片宽度
		height: 100px; // 图片高度
	}

	.navigator {
		position: absolute; // 绝对定位，相对于最近的定位祖先元素（这里是.container）
		bottom: 0; // 底部对齐
		left: 50%; // 水平居中开始点
		transform: translateX(-50%); // 水平居中调整
		// background-color: rgba(246, 246, 246, 0.8); // 可选：添加半透明背景以更好地显示文本
		padding: 10px; // 可选：添加内边距以增加点击区域和美观
		border-radius: 10px 10px 0 0; // 可选：添加圆角，顶部圆角
	}

	.text {
		color: #8f8989; // 文本颜色
		font-size: 22px; // 文本大小
		font-weight: bolder;
	}
</style>